<!--供应商商品库存查询-->
<style lang="less" sccoped>
  .name{
    padding-top:0.2rem;
    i{
      color:#4ea6f8;
    }
  }
  .msg{
    .org {
      color:#f0a800 !important;
    }
  }
  .dateState {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    .iconfont {
      color:rgb(119, 186, 189);
    }
    em {
      margin-left: 5px;
      color:#333;
    }
  }
  .hasDate {
    top:161px;
  }
</style>

<template>
  <div class="contain">
    <div class="listhead-fix">
      <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'stock', hasDate: 'Y', tabNo: this.tabNo}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt?sechTxt:tabNo == 1?'商品名称/时间':'商品名称/批号/时间'}}</div>
          </div>
        </router-link>
      </div>
      <div class="detail-state dateState" v-if="BeginDate">
        <i class="iconfont icon-upcoming"></i>
        <em>时间段：<i style="font-size:13px">{{BeginDate}} - {{EndDate}}</i></em>
      </div>

      <div class="tab-nav">
        <div class="displayflex">
          <div class="flex1" v-bind:class="{selected:tabNo===1}" @click="changeTab(1)">总库存</div>
          <div class="flex1" v-bind:class="{selected:tabNo===2}" @click="changeTab(2)">批号库存</div>
        </div>
      </div>
    </div>

    <scroller lock-x scrollbar-y use-pullup :height="BeginDate?'-209':'-168'" :class="BeginDate?'hasDate':''" class='scroller-wrap' v-if="todolist.length > 0" ref="Scroller" :pullup-config="ScrollerConfig" @on-pullup-loading="loadMore">
      <div>
        <div class="list-goods-warp" v-for="(item, index) in todolist">
          <div class="name"><i class="llse llse-med"></i> {{item.Name}}</div>
          <div class="displayflex">
            <div class="pic">
              <img :src="item.PictContent | filterImg">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.GoodsName}}<i class="good-licence iconfont icon-licence"></i></p>
              <p>{{item.GoodsSpec}}</p>
              <p>{{item.Producer}}</p>
              <p v-if="tabNo === 2">批号：<i class="org">{{item.Lot}}</i></p>
              <p>库存：<i class="org">{{item.StockQty?item.StockQty.toFixed(0):''}}</i>{{item.UnitStyle}}</p>
              <p>时间：{{item.CreateTime | time}}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>

    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='2'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
export default {
  components:{
    manageFooter,
  },
  data() {
    return {
      sechTxt: '',
      BeginDate:'',
      EndDate:'',

      todolist:[],
      totalRecords:0,
      PageIndex:1,
      PageSize:4,
      noMore:false,
      ScrollerConfig: {
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
      tabNo:0,
    };
  },
  watch: {
    tabNo(n,o){
      if(n !== o){
        this.getData();
      }
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    }
  },
  created(){
    this.sechTxt = sessionStorage.sechtxt;
    this.BeginDate = sessionStorage.BeginDate;
    this.EndDate = sessionStorage.EndDate;

    if(sessionStorage.getItem('StockTab')){
      this.tabNo = sessionStorage.getItem('StockTab')*1;
      sessionStorage.removeItem('StockTab')
    } else {
      this.tabNo = 1;
    }
  },
  mounted() {
  },
  methods: {
    changeTab(tabNo){
      this.todolist = [];
      this.PageIndex = 1;
      this.noMore = false;
      this.sechTxt = '';
      this.BeginDate = '';
      this.EndDate = '';
      this.tabNo = tabNo;
    },
    loadMore(){
      this.getData();
    },
    getData(type){
      let url = 'getMedStock',
          query = {
            GoodsName: this.sechTxt,
            Name: this.sechTxt,
            PageIndex: this.PageIndex,
            PageSize: this.PageSize,
            StaffGuid: this.userinfo.StaffID,
            BeginDate: this.BeginDate,
            EndDate:this.EndDate,
          };
      
      sessionStorage.removeItem('sechtxt');
      sessionStorage.removeItem('BeginDate');
      sessionStorage.removeItem('EndDate');
      
      if(this.tabNo === 2) {
        url = 'getLotMedStock';
        query.Lot = this.sechTxt;
      }

      this.Ajax.post(url,query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if(resp.Datas !== null && resp.Datas.length > 0){
            this.PageIndex++;
            this.todolist = this.todolist.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: resp.ErrorMessage || '操作异常，请稍后重试',
          });
        }
      });
    },
    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },
  }
}
</script>